<script setup lang="ts">
import InfiniteList from "@/components/InfiniteList/index.vue";
import {
  deleteKnoDoc,
  embedKnoDoc,
  EmbedStatus,
  getKnoDocList,
  KnoDoc
} from "../../../api/knoDoc";
import { ref } from "vue";
import { Reload } from "@/components/ReCropper/src/svg";
import { ElMessage } from "element-plus";

const props = defineProps<{
  namespace: string;
  useDoc?: (doc: KnoDoc) => void;
}>();

const tableListRef = ref();

const loadData = async (arg: any): Promise<{ list: any[]; total: number }> => {
  const { data, ok } = await getKnoDocList({
    ...arg,
    namespace: props.namespace
  });
  if (ok) {
    return { list: data.list, total: data.total };
  } else {
    return { list: [], total: 0 };
  }
};

const embedFile = async (item: KnoDoc) => {
  const { ok, msg } = await embedKnoDoc(item);
  if (ok) {
    reload();
  } else {
    ElMessage.error(msg);
  }
};

const reload = () => {
  tableListRef.value.reload();
};

defineExpose({
  reload
});
</script>

<template>
  <InfiniteList ref="tableListRef" :load="loadData" fit table-layout="auto">
    <el-table-column prop="title" label="标题" />

    <el-table-column prop="embedStatus" label="嵌入状态">
      <template #default="{ row }">
        <el-tag v-if="row.embedStatus === EmbedStatus.Failed" type="danger">
          向量化失败
        </el-tag>
        <el-tag v-if="row.embedStatus === EmbedStatus.Success" type="success">
          向量化成功
        </el-tag>
        <el-tag v-if="row.embedStatus === EmbedStatus.Progress" type="info">
          <div v-loading="true" />
          向量化中
        </el-tag>
        <el-tag v-if="row.embedStatus === EmbedStatus.None" type="info">
          未向量化
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="updatedAt" label="更新时间" />
    <el-table-column label="操作">
      <template #default="{ row }">
        <el-dropdown class="ns-opt" :hide-on-click="false" trigger="click">
          <el-icon>
            <More />
          </el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item
                icon="Connection"
                :disabled="row.embedStatus === EmbedStatus.Success"
                @click="embedFile(row)"
              >
                向量化
              </el-dropdown-item>
              <el-dropdown-item
                icon="Link"
                :disabled="
                  !props.useDoc || row.embedStatus !== EmbedStatus.Success
                "
                @click="props.useDoc && props.useDoc(row)"
              >
                <el-tooltip
                  content="文档需要先做向量化,然后才能引用到知识库对话中"
                >
                  引用
                </el-tooltip>
              </el-dropdown-item>
              <el-dropdown-item icon="Delete">
                <el-popconfirm
                  title="确认删除吗?"
                  @confirm="deleteKnoDoc(row.id)"
                >
                  <template #reference> 删除 </template>
                </el-popconfirm>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </template>
    </el-table-column>
  </InfiniteList>
</template>
<style lang="scss" scoped></style>
